<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		点击鼠标移动
		<hr />
		<div id="wrap" style="user-select: none;">0_0</div>
		<div id="wrap2" style="user-select: none;">移动范围：0_0</div>
		<script type="text/javascript">
			var UA = navigator.userAgent
			var getsign = (UA.indexOf('Windows') != -1 || UA.indexOf('Macintosh') != -1)?'win':'mob';//
			var mode = window
			//
			var startx = 0,starty = 0,mxing = 0,mying = 0;
			//
			function getlastXYbase(ev,end){
				var evX = getsign == 'win'?ev.pageX:ev.touches[0].pageX,
					evY = getsign == 'win'?ev.pageY:ev.touches[0].pageY;
				/*判断滑动方向*/
				mxing = evX
				mying = evY
				setTimeout(function(){
					/* if(evX-mxing>0&&evY-mying==0){
						console.log('往左')
					}else if(evX-mxing>0&&evY-mying>0){
						console.log('往左上')
					}else if(evX-mxing>0&&evY-mying<0){
						console.log('往左下')
					}
					if(evX-mxing<0&&evY-mying==0){
						console.log('往右')
					}else if(evX-mxing<0&&evY-mying>0){
						console.log('往右上')
					}else if(evX-mxing<0&&evY-mying<0){
						console.log('往右下')
					}
					if(evY-mying>0&&evX-mxing==0){
						console.log('往上')
					}
					if(evY-mying<0&&evX-mxing==0){
						console.log('往下')
					} */
					document.getElementById('wrap').innerHTML = mxing + '_' + mying
					if(end){
						document.getElementById('wrap2').innerHTML = '移动范围：'+ (mxing - startx) + '_' + (mying - starty)
					}
				},65)
			}
			//
			function getlastXY(e){
				getlastXYbase(e)
			}
			function getlastXY2(e){
				getlastXYbase(e,1)
			}
			mode.addEventListener(getsign == 'win'?'mousedown':'touchstart',function(e){
				startx = getsign == 'win'?e.pageX:e.touches[0].pageX;
				starty = getsign == 'win'?e.pageY:e.touches[0].pageY;
				window.addEventListener(getsign == 'win'?'mousemove':'touchmove',getlastXY)
			})
			window.addEventListener(getsign == 'win'?'mouseup':'touchend',function(e){
				getlastXY2(e)
				window.removeEventListener(getsign == 'win'?'mousemove':'touchmove',getlastXY)
			})
		</script>
	</body>
</html>
